import React, { memo } from 'react'
import { useNavigate } from 'react-router-dom'
import {useDispatch, useSelector} from 'react-redux'
import {jia,jian} from '../store/todo'
const Home = memo(() => {
  const navigate=useNavigate()
  // 拿到购物车里的数据
  const shop=useSelector(state=>state.todo.shop)
  const dispacth=useDispatch()
  
  return (
    <div>
      <button onClick={()=>navigate('/Serch')}>点击前往Serch</button>
      <button onClick={()=>navigate('/Todo')}>点击前往Todo</button>

      {shop.map(item=>(
        <div key={item.id}>{item.name}￥{item.price} <button onClick={()=>dispacth(jian(item.id))}>-</button>{item.num} 
        <button onClick={()=>dispacth(jia(item.id))}>+</button></div>
      ))}

      总数量 {shop.reduce((pre,cur)=>{
        pre+=cur.num
        return pre
      },0)}
      总价格  {shop.reduce((pre,cur)=>{
        pre+=cur.num*cur.price
        return pre
      },0)}
    </div>
  )
})

export default Home